<template>
	<view>
		<view class="none" v-if="list.length == 0">没有数据</view>
		<view class="item" v-for="(item,index) in list" :key="index">
			<view class="title">
				<view class="avatar">
					<image :src="item.avatar ? item.avatar : defimg"></image>
					<view class="name">{{item.nicheng ? item.nicheng :'未设置昵称'}}</view>
				</view>
				<view @tap="delItem(item.article_id,index)" v-if="user_id == item.user_id">
					<i class="iconfont iconkechengshanchu"></i>
				</view>
				<!-- <view class="type" @tap="changeType(item.type,index)">
					<view v-if="item.type == 0"><i class="iconfont1 iconjiaguanzhu"></i></view>
					<view v-else><i class="iconfont1 iconyiguanzhu"></i></view>
				</view> -->
			</view>
			<view class="cont" @tap.top="goDetail(item)">{{item.title}}</view>
			<view class="artCont" v-if="item.type == 1" @tap.top="goDetail(item)">
				<u-parse :content="item.content" ></u-parse>
			</view>
			<view class="info">
				<view class="left">
					<view class="tip" v-if="item.article_name">{{item.article_name}}</view>
					<view class="time">{{item.time}}</view>
				</view>
				<view class="nums">
					<view class="zan" :class="[item.is_like == 2 ? 'zan_active' : '']" @tap="changeIslike(item.article_id,item.is_like,index)">
						<i class="iconfont1 iconzan"></i>
						<text v-if="item.likenum < 10000">{{item.likenum}}</text>
						<text v-else>{{item.likenum / 10000}}w</text>
					</view>
					<view class="comment" @tap="comment(item.article_id)"><i class="iconfont1 iconpinglun"></i>{{item.commentnum}}</view>
					<!-- <view class="forward"><i class="iconfont1 iconzhuanfa"></i>{{item.transpondnum}}</view> -->
				</view>
			</view>
			<!-- <view class="comments">
				<view v-for="(item1,index1) in item.discuss" :key="index1">
					<view class="name"><text>{{item1.name}}:</text>{{item1.cont}}</view>
				</view>
				<text class="checkAll">查看全部评论</text>
			</view> -->
		</view>
		<uni-load-more v-if="list.length>6" :status="status" :content-text="contentText" />
	</view>
</template>

<script>
	import uParse from '@/components/u-parse/u-parse.vue';
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	export default {
		components:{
			uParse,
			uniLoadMore
		},
		data() {
			return {
				user_id: uni.getStorageSync('userInfo').id
			}
		},
		props: {
			list: Array,
			status: String,
			contentText: Object
		},
		methods: {
			goDetail(item) {
				uni.navigateTo({
					url: '/pages/articleModule/article-detail?stateType=0' + '&article_id=' + item.article_id
				})
			},
			/* 喜欢 & 不喜欢 */
			changeIslike(article_id, is_like, index) {
				var state = 0;
				if (is_like == 2) {
					state = 0;
				} else {
					state = 2;
				}
				var data = {
					article_id: article_id,
					is_like: state
				}
				this.$api.apiPost('user/article.Users/isLike', data).then(res => {
					if (res.data.code == 200) {
						var data = {};
						data.type = 1;
						data.index = index;
						data.is_like = is_like;
						this.$emit('islike', data);
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
					}
				})
			},
			/* 删除文章 */
			delItem(article_id,index) {
				var _this = this;
				uni.showModal({
					title: '删除提示',
					content: '您确定要删除该文章吗？',
					confirmColor: '#00D5A2',
					success:function(res){
						if(res.confirm) {
							_this.$api.apiPost('user/article.Users/delArticle',{article_id: article_id}).then(res=>{
								uni.showToast({
									title: res.data.msg,
									icon: 'none'
								})
								if(res.data.code == 200) {
									_this.list.splice(index,1);
									_this.$emit('del',1)
								} 
							})
						}
					}
				})
			},
			/* 跳转评论 */
			comment(article_id) {
				uni.navigateTo({
					url: '../../topic/replyAll?article_id='+article_id
				})
			}
		}
	}
</script>

<style>
	.none {
		color: #999999;
		text-align: center;
		margin-top: 200upx;
	}
	.item {
		margin: 30upx;
		padding: 30upx;
		border-radius: 40upx;
		background: #FFFFFF;
		position: relative;
		/* z-index: 999; */
	}

	.title {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.avatar {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.avatar image {
		width: 72upx;
		height: 72upx;
		margin-right: 10upx;
		border-radius: 50%;
	}

	.avatar .name {
		color: #333333;
		font-size: 32upx;
	}
	
	.iconkechengshanchu{
		color: #FF7171;
		font-size: 50upx;
		line-height: 1;
	}

	.iconjiaguanzhu {
		font-size: 80upx;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		line-height: 1;
		background-image: linear-gradient(90deg, rgba(254, 118, 91, 1) 0%, rgba(254, 185, 104, 1) 100%);
	}

	.iconyiguanzhu {
		color: #E5E5E5;
		font-size: 80upx;
		line-height: 1;
	}

	.cont{
		color: #333333;
		font-size: 32upx;
		margin-top: 10upx;
	}
	.artCont{
		overflow: hidden;
		color: #666666;
		font-size: 30upx;
	}

	.imgs {
		max-width: 100%;
	}

	.imgs image {
		max-width: 100%;
	}

	.info {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.left {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.tip {
		color: #00D5A2;
		padding: 4upx 8upx;
		border: 2upx solid #00D5A2;
		border-radius: 24upx;
		line-height: 1;
		margin-right: 14upx;
		font-size: 24upx;
	}

	.time {
		color: #999999;
		font-size: 26upx;
	}

	.nums {
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.nums view {
		color: #999999;
		font-size: 26upx;
		margin-left: 20upx;
		display: flex;
		align-items: center;
	}

	.nums i {
		font-size: 50upx;
	}

	.zan_active {
		color: #FF4E78 !important;
	}

	.zan_active i {
		color: #FF4E78;
	}

	.comments {
		background: #F7F7F7;
		border-radius: 20upx;
		padding: 20upx;
	}

	.comments .name text {
		color: #333333;
		white-space: nowrap;
		margin-right: 20upx;
	}

	.comments .name {
		color: #999999;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.checkAll {
		color: #666666;
		font-size: 26upx;
	}
</style>
